<template>
  <div class="container">
    <div>
      <img src="../../assets/img/2020033119211163865.jpg" alt />
    </div>
    <Breadcrumb>
      <BreadcrumbItem to="/home">书店首页</BreadcrumbItem>
      <BreadcrumbItem>{{bookname}}</BreadcrumbItem>
    </Breadcrumb>
    <div class="seckill-content">
      <div class="seckill-item" v-for="(item, index) in bookdetailinfo" :key="index">
        <div class="seckill-item-img">
          <router-link :to="'/gooddetail/'+item.bookid">
            <img :src="item.bookImg" />
            <!-- 3.这里实现图片放大镜的功能 -->
            <!-- <pic-zoom :url="item.bookImg" :scale="3" :scroll="true" width="100%" height="100%"></pic-zoom> -->
          </router-link>
        </div>
        <div class="seckill-item-content">
          <div class="seckill-item-info">
            <div class="bname">
              <h2>{{item.bookname}}</h2>
            </div>
            <div class="author">
              <span>
                作者:
                <span class="name">{{item.author}}</span>
              </span>
            </div>
            <div class="detail-book-desc">
              <h3>{{item.desc}}</h3>
            </div>
            <el-rate
              v-model="value"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
            ></el-rate>
            <div class="detail-book-price">
              <p>胡椒价</p>
              <!-- <a href="#" style="display:inline">降价通知</a> -->
              <span class="seckill-price text-danger">
                <!-- <Icon type="logo-yen"></Icon> -->
                ￥{{item.price}}
              </span>
              <p class="seckill-old-price">
                <!-- <Icon type="logo-yen"></Icon> -->
                <s>￥{{item.oldprice}}</s>
              </p>
            </div>
          </div>
          <div class="book-detail-buy">
            <div class="book-detail-computer">
              <Computer></Computer>
              <br />
              <span>
                每账户最多买
                <em style="color:red">9</em>件
              </span>
            </div>
            <el-button icon="el-icon-shopping-cart-1" type="success" @click="addShopCart">加入购物车</el-button>
            <el-button type="danger" plain @click="toBuy">立即购买</el-button>
            <!-- <p>{{bookdetailinfo[0].bookImg}}</p>     -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 2.实现图片放大功能，安装后导入
import PicZoom from "vue-piczoom";
import Computer from "../Computer.vue";
export default {
  //接收路由传参的方式一
  props: {
    id: ""
  },
  data() {
    return {
      value: 3.7,
      queryInfo: {
        query: this.$route.params.id
      },
      //接收路由传参的方式二
      bookid: this.$route.params.id,
      bookdetailinfo: [],
      bookname: ""
    };
  },
  methods: {
    async addShopCart() {
      if (window.sessionStorage.token) 
      {
        const { data: res } = await this.$axios.post("shopCart/add", {
          userid: window.sessionStorage.userid,
          singleprice: this.bookdetailinfo[0].price,
          bookname: this.bookdetailinfo[0].bookname,
          count: this.$store.state.count,
          sumprice: this.bookdetailinfo[0].price * this.$store.state.count,
          total: 200,
          bookImg: this.bookdetailinfo[0].bookImg
        });
        if (res.code !== 200) return this.$message.error("加入购物车失败");
      this.$message.success("成功加入购物车");
      } else {
        this.$message.error("请先登录！");
      }
    },
    toBuy() {
      // 把商品id和购买数量传过去给订单页
      if (window.sessionStorage.token) {
        this.$router.push({
          path: "/orderpay",
          query: {
            count: this.$store.state.count,
            bookid: this.bookid
          }
        });
      } else {
        this.$message.error("请先登录！");
      }
    }
  },
  mounted() {
    this.$axios
      .get("http://localhost:8080/api/admin/goodList/detail", {
        params: this.queryInfo
      })
      .then(result => {
        console.log(result.data.data[0].bookname);
        // console.log(this.bookdetailinfo[0].bookImg);
        if (result.data.code !== 200) return this.$message.error("获取失败");
        // this.$message.success("获取成功");
        this.bookdetailinfo = result.data.data;
        this.bookname = result.data.data[0].bookname;
      });
  },
  components: {
    PicZoom,
    Computer
  }
};
</script>

<style scoped>
.container {
  /* background-color: bisque */
  margin-left: 20%;
  margin-top: 20px;
}
.seckill-content {
  /* padding-top:50px ; */
  margin-top: 50px;
  height: 600px;
  display: flex;
}
.seckill-item {
  display: flex;
}
.seckill-item-content {
  margin-left: 20px;
  width: 700px;
}
.bname {
  font-size: 20px;
  color: black;
}
.seckill-item div {
  /* flex: 1; */
  /* flex-direction:column; */
}
/* 装图片的容器 */
.seckill-item-img {
  width: 320px;
  height: 320px;
}
.seckill-item-img img {
  height: 100%;
  width: 100%;
}
.author .name {
  color: blue;
}
.detail-book-desc {
  margin: 10px auto;
  color: black;
  font-family: Microsoft Yahei;
}
.detail-book-price {
  padding-top: 25px;
  margin-bottom: 10px;
  height: 150px;
  background-color: #fcfaf7;
}
.detail-book-price span:nth-child(2) {
  color: red;
  font-size: 25px;
}
.detail-book-price p {
  margin-left: 8px;
  color: gray;
  font-size: 15px;
}
.book-detail-buy {
  margin-top: 40px;
}
.book-detail-computer {
  margin-bottom: 10px;
}
.book-detail-computer span {
  margin-top: 5px;
}
</style>